<template>
    <div class="input-box">组件名:   <el-input v-model="nameInput" style="width: 240px" placeholder="请输入组件名.." /></div>
    <div class="input-box">图片地址: <el-input v-model="imgUrl" style="width: 240px" placeholder="请输入图片名.." /></div>
    <div class="input-box">源码链接: <el-input v-model="codeUrl" style="width: 240px" placeholder="请输入源码链接.." /></div>
    <div class="input-box">
        代码:
        <el-input v-model="textarea" style="width: 400px" type="textarea" placeholder="Please input" autosize />
        <el-button type="primary" @click="submit">提交</el-button>



    </div>
</template>
  
<script setup>
import { ref } from 'vue'
import { $_upload, $_get_getDetail } from "@/api/user"
import { useRoute } from 'vue-router';
const nameInput = ref('')
const textarea = ref('')
const imgUrl = ref('')
const codeUrl = ref('')
const cid = ref('')
const route = useRoute()


const submit = () => {
    $_upload({
        name: nameInput.value,
        code: textarea.value,
        imgurl: imgUrl.value,
        code_url:codeUrl.value,
        cid: cid.value,
    }).then((res) => {
        if (res.success) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            nameInput.value = ''
            textarea.value = ''
            imgUrl.value = ''
        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

cid.value = route.query.cid
if (cid.value) {
    $_get_getDetail({ cid: cid.value }).then((res) => {
        console.log(res);
        if (res.success) {
            nameInput.value = res.result.name
            textarea.value = res.result.code
            imgUrl.value = res.result.imgurl
            cid.value = res.result.cid
        }
    })
}


</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
  
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.input-box {
    display: flex;
    align-items: center;
}
</style>
  